<template>
	<view>
		<!-- <view class="top flex align-center justify-between">
			<text class="lg cuIcon-back"></text>
			<text>热卖商品</text>
			<text class="lg cuIcon-list"></text> 
		</view> -->
		<view class="content">
			<view class="recommend-con flex align-center justify-between flex-wrap">
				<block v-for="(item,index) in hotCommodityList">
					<view class="recommend-item flex flex-direction" @tap="toGoodsDetail(item)">
						<image class="recommend-img1" :src="item.img_url"></image>
						<text>{{item.title}}</text>
						<view class="recommend-bto flex align-center justify-between">
							<text class="text-price">{{item.price}}</text>
							<view class="flex align-center justify-center">
								<text class="lg cuIcon-cart"></text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="flex solid-bottom padding justify-center">
			<text class="loadMore">{{loadStr}}</text>
		</view>
	</view>

</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				refreshing: false,
				loadStr: '',
				fetchPageNum: 1,
				hotCommodityList: [],
			}
		},
		onLoad() {
			this.loadHotCommodity()
		},
		onReachBottom() {
			console.log('滑动到页面底部')
			this.loadHotCommodity();
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.refreshing = true;
			this.loadHotCommodity();
		},
		methods: {
			loadHotCommodity: function() {
				// this.loadStr = '加载中...'
				api.get({
					url: 'Goods/GetHotGoodsList',
					data: {
						page: this.refreshing ? 1 : this.fetchPageNum,
						pagesize: 30
					},
					success: data => {
						console.log(data)
						if (data.ErrCode == 0) {
							if(this.hotCommodityList.length<=0){
								this.hotCommodityList = data.Response
							}else{
								this.hotCommodityList =this.hotCommodityList.concat(data.Response)
							}
							this.fetchPageNum += 1
							console.log(this.orderList.length)
							this.refreshing = false;
							uni.stopPullDownRefresh();
							this.loadStr = ''
						} else if (data.ErrCode == 2) {
							if (data.ErrMsg == '暂无内容') {
								this.refreshing = false;
								uni.stopPullDownRefresh();
								this.loadStr = '已经到底了'
								return;
							}
						}
					}
				});
			},
			/**
			 * 跳转到商品详情
			 */
			toGoodsDetail: function(item) {
				console.log(item);
				uni.navigateTo({
					url: "/module/good/goodsDetails/goodsDetails?id=" + item.id
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top text {
		color: #fff;
		font-size: 36upx;
	}

	.top {
		width: 100%;
		height: 80upx;
		background-color: $btn-bground;
		padding: 0 30upx;
	}

	.recommend-con {
		padding-top: 30upx;
	}

	.content {
		background-color: #fff;
		padding: 0 30upx;
	}

	.recommend-bto>view {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		background-color: #fde1e1;
	}

	.recommend-bto>view>text {
		color: #f03737;
		font-size: 20upx;
	}

	.recommend-bto>text {
		font-size: 30upx;
		color: #f03737;
	}

	.recommend-img1 {
		width: 330upx;
		height: 330upx;
	}

	.recommend-item>text {
		font-size: 22upx;
		color: #666666;
		margin-top: 6upx;
	}

	.recommend-item {
		margin-bottom: 24upx;
	}

	.recommend-title {
		height: 68upx;
	}

	.recommend-title>view>text {
		font-size: 24upx;
		color: #999999;
	}

	.recommend-title>text {
		font-size: 30upx;
		color: #333333;
		font-weight: 500;
	}
</style>
